<script setup>
import { showFailToast } from 'vant';
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router';
import 'vant/lib/index.css';
import { useUserStore } from '@/stores/user';

const name = ref('')
const tel = ref('')
const idcode = ref('')
const carid = ref('')
const cartype = ref('')
const carphoto = ref('')
const router = useRouter()
const showPicker = ref(false)
const showPicker2 = ref(false)
const user = useUserStore()

const columns = ref([
    // 第一列
    [
        { text: '普通厢车', value: '普通厢车' },
        { text: '平板挂车', value: '平板挂车' },
        { text: '平板货车', value: '平板货车' },
    ],
    // 第二列
    [
        { text: '4.2米', value: '4.2米' },
        { text: '5.4米', value: '5.4米' },
        { text: '6.8米', value: '6.8米' },
    ],
])
const columns2 = ref([
    { text: '相册上传', value: 1 },
    { text: '拍照上传', value: 2 },
])

const flag = computed(() => {
    let telFlag = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(tel.value)
    let idcodeFlag = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/.test(idcode.value)
    let isregister = user.isTelinList(tel.value)
    return telFlag && idcodeFlag && isregister
})

function tonext() {
    // console.log(name.value, carid.value, cartype.value, flag.value);

    if (name.value && carid.value && cartype.value && flag.value) {
        router.push({
            path: '/register/regstep2',
            query: {
                name: name.value,
                tel: tel.value,
                idcode: idcode.value,
                carid: carid.value,
                cartype: cartype.value
            }
        })
    } else {
        showFailToast('请填写完整信息')
    }
}

function onConfirm(selectedOptions) {
    showPicker.value = false
    cartype.value = selectedOptions.selectedValues[0] + ' ' + selectedOptions.selectedValues[1]
}
function onConfirm2(selectedOptions) {
    showPicker2.value = false
    console.log(selectedOptions.selectedValues[0]);

}
</script>

<template>
    <div class="step">
        <span class="active">1.基本信息</span>
        <span>2.设置密码</span>
    </div>
    <van-cell-group class="box">
        <van-field v-model="name" required label="姓名" />
        <van-field v-model="tel" required label="手机号码" />
        <van-field v-model="idcode" required label="身份证号" />
    </van-cell-group>
    <van-cell-group class="box">
        <van-field v-model="carid" required label="车牌号" />
        <van-field v-model="cartype" required label="车辆类型" is-link @click="showPicker = true" />
        <van-field v-model="carphoto" required label="车辆照片" is-link @click="showPicker2 = true" />
    </van-cell-group>
    <div class="hint">
        <van-icon name="warning" color="red" />
        <span>请认真填写信息，注册成功后将不能修改</span>
    </div>
    <div class="button">
        <van-button block round type="primary" @click="tonext">下一步</van-button>
    </div>
    <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
    </van-popup>
    <van-popup v-model:show="showPicker2" round position="bottom">
        <van-picker :columns="columns2" @cancel="showPicker2 = false" @confirm="onConfirm2" />
    </van-popup>
</template>

<style lang="scss" scoped>
.step {
    display: flex;
    justify-content: space-between;
    background-color: white;

    span {
        flex: 1;
        text-align: center;
        padding: 10px 0;
        font-size: 14px;
    }

    .active {
        color: #3a8cff;
    }

}

.box {
    margin-top: 10px;
}

.hint {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;

    span {
        margin-left: 5px;
    }
}

.button {
    width: 335px;
    margin: 0 auto;
    margin-top: 10px;
}
</style>